<template>
  <div class="wrap">
    <div v-show="isshow">
      <div class="imglist">
        <div class="left"><span @click="back" class="back iconfont">&#xe624;</span></div>
        <p class="center">景点图片</p>
      </div>
      <ul class="clearfix lists">
        <li class="lists-item"><img @click="goswiper" class="img" src="static/mock/img/hotdetails/ones.jpg" alt="img"></li>
        <li class="lists-item"><img @click="goswiper" class="img" src="static/mock/img/hotdetails/ones.jpg" alt="img"></li>
        <li class="lists-item"><img @click="goswiper" class="img" src="static/mock/img/hotdetails/ones.jpg" alt="img"></li>
        <li class="lists-item"><img @click="goswiper" class="img" src="static/mock/img/hotdetails/ones.jpg" alt="img"></li>
        <li class="lists-item"><img @click="goswiper" class="img" src="static/mock/img/hotdetails/ones.jpg" alt="img"></li>
      </ul>
    </div>
    <div @click="goswiper" class="swiperdad" v-show="!isshow">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide><img class="swiperimg" src="static/mock/img/hotdetails/ones.jpg" alt="img"></swiper-slide>
        <swiper-slide><img class="swiperimg" src="static/mock/img/hotdetails/ones.jpg" alt="img"></swiper-slide>
        <swiper-slide><img class="swiperimg" src="static/mock/img/hotdetails/ones.jpg" alt="img"></swiper-slide>
        <swiper-slide><img class="swiperimg" src="static/mock/img/hotdetails/ones.jpg" alt="img"></swiper-slide>
        <swiper-slide><img class="swiperimg" src="static/mock/img/hotdetails/ones.jpg" alt="img"></swiper-slide>
      </swiper>
      <!-- 分页器 -->
      <div class="split swiper-pagination"  slot="pagination"></div>
    </div>
  </div>
</template>

<script>
    export default {
        data(){
          return{
            isshow:true,
            swiperOption: {
              loop:true,
              pagination: {
                el: '.swiper-pagination',
                type:'fraction'
              },
            }
          }
        },
        methods:{
          back(){
            this.$router.push("/hotdetails")
          },
          goswiper(){
            this.isshow = !this.isshow
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl"
  .split
    color: #ffffff
    font-size: .28rem
  .wrap
    .swiperdad
      background: #000000
      position: fixed
      top: 0
      left: 0
      bottom: 0
      right: 0
      display: flex
      align-items: center
      align-content: center
      .swiper
        .swiperimg
          vertical-align: top
          width: 100%
    .lists
      margin-top: 1rem
      .lists-item
        width: 48%
        float: left
        margin: 1%
        .img
          vertical-align top
          width 100%
    .imglist
      border-bottom 1px solid #ddd
      display: flex
      position: fixed
      width: 100%
      top: 0
      left: 0
      line-height: .88rem
      background: #fff
      font-size: .32rem
      color: #333333
      .left
        margin: 0 .2rem
        .back
          font-size: .48rem
      .center
        text-align: center
        width: 5rem
        margin: 0 auto
        margin-left: 6%
        $txtH()

</style>
